<template>
  <div
    :class="[
      'min-w-[180px]',
      deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
    ]"
  >
    <h3 class="my-8">修改密码</h3>
    <el-form
      ref="ruleFormRef"
      label-position="top"
      :rules="rules"
      :model="ruleForm"
    >
      <el-form-item label="旧密码" prop="oldPassword">
        <el-input
          v-model="ruleForm.oldPassword"
          show-password
          clearable
          placeholder="请输入旧密码"
        />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input
          v-model="ruleForm.newPassword"
          show-password
          clearable
          placeholder="请输入新密码"
        />
      </el-form-item>
      <el-form-item label="确认密码" prop="repeatPassword">
        <el-input
          v-model="ruleForm.repeatPassword"
          show-password
          clearable
          placeholder="请再次输入新密码"
        />
      </el-form-item>
      <el-button type="primary" @click="onSubmit(ruleFormRef)">
        修改密码
      </el-button>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { message } from '@/utils/message'
import type { FormInstance, FormRules } from 'element-plus'
import { deviceDetection } from '@pureadmin/utils'
import { updateUserPassword } from '@/api/user'
import { HttpResultCode } from '@/utils/http/enums'
import { useUserStoreHook } from '@/store/modules/user'

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  oldPassword: '',
  newPassword: '',
  repeatPassword: ''
})
const REGEXP_PWD = /^[a-zA-Z0-9][a-zA-Z0-9_]{5,19}$/
const rules = reactive<FormRules<typeof ruleForm>>({
  oldPassword: [{ required: true, message: '旧密码不能为空', trigger: 'blur' }],
  newPassword: [
    { required: true, message: '新密码不能为空', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else if (!REGEXP_PWD.test(value)) {
          callback(
            new Error(
              '密码应为6-20位字母、数字、下划线的组合,且以字母或数字开头'
            )
          )
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  repeatPassword: [
    { required: true, message: '确认密码不能为空', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入确认密码'))
        } else if (ruleForm.newPassword !== value) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
})

// 修改密码
const onSubmit = async (formEl: FormInstance) => {
  await formEl.validate((valid, fields) => {
    if (valid) {
      updateUserPassword(ruleForm)
        .then(({ code, msg }) => {
          if (code === HttpResultCode.Success) {
            message('修改密码成功,请重新登录', { type: 'success' })
            useUserStoreHook().logOut()
          } else {
            message(msg, { type: 'error' })
          }
        })
        .catch(() => {
          message('修改密码失败', { type: 'error' })
        })
    }
  })
}
</script>
